$(function(){
    // 初始化富文本编辑器
        initEditor()

    // 1. 初始化图片裁剪器
        var $image = $('#image')
  
    // 2. 裁剪选项
        var options = {
            aspectRatio: 400 / 280,
            preview: '.img-preview'
        }
  
    // 3. 初始化裁剪区域
        $image.cropper(options)


    /*
    需求：
        1.页面加载时  
            1.1 发送请求给文章类别添加数据
            1.2 根据id发送请求获取后台数据赋值给修改表单-->写在步骤1.1的函数体里,确保后执行
                1.2.1 获取id：location.href.split("=")[1]
                1.2.2 发送请求
            1.3 给富文本插件添加内容
                1.3.1 请求的响应速度可能比自身电脑渲染富文本插件快,需要延迟请求速度
                1.3.2 富文本赋值方法:tinyMCE.editors[0].setContent(内容)
            1.4 给cropper图片裁切插件添加图片
                1.4.1 将响应获取的图片进行地址拼接-->返回的图片地址是没有协议和网址的,不拼接会自动拼接盘符的地址
                1.4.2 展示三部曲： 销毁  赋地址  展示
        2.声明全局变量存储点击状态
        3.选择文章封面
            3.1 点击按钮触发file的点击事件
            3.2 将选择的文件转为内存存储的url地址,赋值给展示区
        4.将修改后的表单数据收集传递给后台
            4.1 文章id使用隐藏域接收-->初始化表单时会接收Id
            4.2 封面图转blob格式:文件.toBlob(function(blob){函数体})
                toBlob()函数的回调形参会接收转化为blob格式的文件作为实参再被调用
            4.3 将图片文件转blob格式是异步的,等转化完再发送请求-->请求写在回调函数里
            4.4 请求成功,跳转文章列表页面-->定时器延时看到提示,再跳转
    */ 

    let layer = layui.layer
    let form  = layui.form
    // 1.1 发送请求给文章类别添加数据
    initArtCateSel()
    function initArtCateSel(){
        axios({
            method:'GET',
            url:'/my/article/cates',
        }).then(({data:res})=>{
            if(res.status) return layer.msg(res.message)
            let arr = ['<option value="">请输入文章类别</option>']
            res.data.forEach(ele=>{
                // 过滤脏数据-->forEach遍历使用return会继续循环，等循环完毕再退出函数
                if(ele.Id<0) return
                arr.push(`
                    <option value="${ele.Id}">${ele.name}</option>
                `)
            })
            $('select').empty().html(arr.join(''))
            // 调用三方框架重新渲染下拉菜单样式
            form.render()
            // 渲染完文章类别后再渲染页面数据
            initArtList()
        })
    }
    // 1.2 根据id发送请求获取后台数据赋值给修改表单
    function initArtList(){
        let id = location.href.split("=")[1]
        axios({
            method:'GET',
            url:'/my/article/'+id,
        }).then(({data:res})=>{
            if(res.status) return layer.msg(res.message)
            form.val('editForm',res.data)
            // 给富文本赋值-->避免响应已经完成而富文本界面还未加载
            setTimeout(function(){
                tinyMCE.editors[0].setContent(res.data.content)
            },500)
            // 给图片赋值
            let imgURL = 'http://api-breakingnews-web.itheima.net'+res.data.cover_img
            console.log(imgURL)
            $image.cropper('destroy').attr('src',imgURL).cropper(options)
        })
    }

    // 2.声明全局变量存储点击状态
    let state = null
    $('#btn1').on('click',function(){
        state = '已发布'
    })
    $('#btn2').on('click',function(){
        state = '已发草稿布'
    })

    // 3.选择文章封面
    $('#chooseBtn').on('click',function(){
        $('#chooseImg').click()
    })
    // file的change事件触发时,将图片文件转为url地址-->URL.creatObjectURL(文件)
    $('#chooseImg').on('change',function(){
        // console.log(this.files[0]);  注意：files属性是dom原生file对象才有的
        if(!this.files[0]) return layer.msg('请选择图片')
        let imgURL = URL.createObjectURL(this.files[0])
        //2.3 销毁原来展示区的图片,赋值为新URL,渲染页面-->$image.cropper('destroy').attr(src,'URL').cropper(options)
        $image.cropper('destroy').attr('src',imgURL).cropper(options)
    })

    // 4.将修改后的表单数据收集传递给后台
    $('#editForm').on('submit',function(e){
        e.preventDefault()
        let fd = new FormData(this)
        fd.append('state',state)
        //  封面图转blob格式
        $image.cropper('getCroppedCanvas',{width:400,height:280})
            .toBlob(function(blob){
                fd.append('cover_img',blob)
                // 发送请求
                console.log(...fd)
                axios({
                    method:'POST',
                    url:'/my/article/edit',
                    data:fd
                }).then(({data:res})=>{
                    if(res.status) return layer.msg(res.message)
                    layer.msg('恭喜您,添加成功')
                    // 延时跳转
                    setTimeout(function(){
                        location.href='/article/art_list.html'
                    },1500)
                })
            })

    })

})